<template>
  <div class="wrapper">
    <common-header :title="title"></common-header>
    <comm-scroll :data="list"
                 class="scroll">
      <div class="content">
        <ul class="comments">
          <li class="item"
              border-bottom-1px
              v-for="(item, index) of list"
              :key="item.id"
              @click="handleCilck(item.seller_id)">
            <img :src="item.cover_pic"
                 alt="">
            <div class="right">
              <h3>{{item.shop_name}}</h3>
              <common-star class="star"
                           :score="score[index]"></common-star>
              <p>{{item.content}}</p>
            </div>
          </li>
        </ul>
      </div>
    </comm-scroll>

  </div>
</template>

<script>
import CommonHeader from 'common/header/Header'
import CommScroll from 'common/scroll/Scroll'
import CommonStar from 'common/star/Star'
export default {
  name: 'MeEvaluate',
  components: {
    CommonHeader,
    CommScroll,
    CommonStar
  },
  data () {
    return {
      title: '我的评价',
      list: []
    }
  },
  computed: {
    score () {
      let score = []
      this.list.map((item) => {
        let star = Number((item.composite_score + item.environment_score + item.service_score) / 3)
        star = star.toFixed(1)
        score.push(star)
      })
      return score
    }
  },
  methods: {
    getEvaluate () {
      this.$api.upload.getEvaluate({ page: 1 })
        .then(this.getEvaluateSucc)
    },
    getEvaluateSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.list = data
      }
    },
    handleCilck (id) {
      this.$router.push({
        path: `/detail/${id}`
      })
    }
  },
  activated () {
    this.getEvaluate()
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  initPosition()
  z-index 5
  background-color $bgcWh

  .scroll
    top 106px

    .comments
      width 100%

      .item
        display flex
        background-color $bgcWh
        padding-left 50px
        padding-right 39px
        box-sizing border-box
        padding-top 32px
        padding-bottom 32px

        img
          width 138px
          height 138px
          border-radius 10px
          margin-right 20px

        .right
          h3
            font-weight normal
            color $fzColor
            font-size $fzSecond
            line-height 42px

          .star
            height 50px

          p
            line-height 32px
            font-size $smallFz
            color $graySixth
</style>
